<template>
  <el-dialog
    title="选择菜单类型"
    :visible.sync="visible"
    width="360px"
    :center="true"
    custom-class="dialog-style"
  >
    <ul class="list">
      <li class="item" @click="select()">
        <svg-icon class="icon" icon-class="empty-menu" />
        <span class="title"> 添加菜单 ...</span><br>
        <span class="path">无功能页面菜单</span>
      </li>
      <li
        v-for="(pg, n) in pages"
        :key="n"
        class="item"
        @click="select(pg)"
      >
        <svg-icon class="icon" :icon-class="pg.icon" />
        <span class="title"> {{ pg['title'] }}</span>
        <span v-if="pg.custom" style="color: blue;"> - {{ pg.custom }}</span>
        <svg-icon v-if="pg.admin" style="float:right;" icon-class="admin" />
        <svg-icon v-if="pg.hidden" style="float:right;" icon-class="hidden" />
        <br>
        <span class="path">{{ pg['file'] }}</span>
      </li>
    </ul>
  </el-dialog>
</template>

<script>
import { listFuncs } from '@/svc/funcs'

export default {
  name: 'MenuType',
  model: {
    prop: 'reload',
    event: 'loaded'
  },
  props: {
    reload: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      pages: [],
      visible: false
    }
  },
  mounted() {
    // console.log('show')
    listFuncs.fn(this).then(res => {
      this.pages = res
      this.$emit('loaded', true)
    })
  },
  methods: {
    show() {
      if (this.reload) {
        listFuncs.fn(this).then(res => {
          console.log('reload', res)
          this.pages = res
          this.visible = true
          this.$emit('loaded', true)
        })
      } else {
        this.visible = true
      }
    },
    select(page) {
      this.$emit('select', page)
      this.visible = false
    }
  }
}
</script>

<style scoped lang="less">
.list {
  padding: 0;
  margin: -8px;
  .item {
    list-style: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    .icon {
      height: 13px;
      width: 13px;
    }
    .title {
      font-size: 14px;
    }
    .path {
      font-size: 11px;
    }
  }
  .item:hover {
    background: #eee;
  }
}
</style>
